<template>
  <div class="tmpl">
    <div class="head">
      <ul class="clearfix">
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">体育</a></li>
        <li><a href="javascript:;">足球</a></li>
        <li><a href="javascript:;">篮球</a></li>
        <li><a href="javascript:;">橄榄球</a></li>
        <li><a href="javascript:;">羽毛球</a></li>
        <li><a href="javascript:;">乒乓球</a></li>
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">体育</a></li>
        <li><a href="javascript:;">足球</a></li>
        <li><a href="javascript:;">篮球</a></li>
        <li><a href="javascript:;">橄榄球</a></li>

      </ul>
    </div>
   <!--  <div>
      <lunbo :phoList="imgList2"></lunbo>
    </div> -->

    <div class="price">单价：<span>¥{{price}}</span></div>
    <div class="count">数量：<countV  v-on:sendCount="getCount"></countV></div>

    <div class="total" @click="getTotal"> 总价：{{total | formatTotal}}</div>

    <div class="addressL" >
      <button @click="showAddress">请选择地址</button>

        <subaddress v-if="show" v-on:maskShow="remaskShow" v-on:reAddress="resaveAddress">
        </subaddress>
        <div class="place">
          {{addressList2.userName}}
          {{addressList2.streetName}}
          {{addressList2.tel}}
        </div>

    </div>
    <!-- <div>
      <ul>
        <li v-for="item in linshilist | orderBy 'count' -1">{{item.count}}</li>
      </ul>
    </div> -->

    <!-- 新手引导 -->
    <div class="guide">
      <guide></guide>
    </div>
  </div>
</template>

<script type="text/javascript">
 import lunbo from '../subcom/lunbo.vue'
 import countV from '../subcom/count.vue'
 import subaddress from '../subcom/subaddress.vue'
 import guide from '../subcom/guide.vue'
  export default{
    data(){
      return {
        imgList2: [
          {src: 4},
          {src: 5},
          {src: 6}
        ],
        count: 1,
        price: 22.8,
        total: 0,
        show: false,
        addressList2: {},
        linshilist: [
          {name: "山鹰登山社1",count: 5},
          {name: "山鹰登山社1",count: 8},
          {name: "山鹰登山社1",count: 1},
          {name: "山鹰登山社1",count: 2},
          {name: "山鹰登山社1",count: 3},
          {name: "山鹰登山社1",count: 1},
          {name: "山鹰登山社1",count: 4},
        ]
      }
    },
    components: {
      lunbo,countV,subaddress,guide
    },
    methods: {
      getCount(count){
        this.count = count
      },
      getTotal(){
        this.total = this.price*this.count;
      },
      showAddress(){
        this.show = true
      },
      // 接受子组件传值
      resaveAddress(address){
        this.addressList2 = address;
        // this.addressList2 = Object.assign({},address);
      },
      remaskShow(){
        this.show = false;
      }
    },
    filters: {
      formatTotal(value){
        // return Math.ceil(value)
        return '¥' + value.toFixed(2)
      }
    },
    created(){
      this.total = this.price*this.count;
    },
    watch: {
      count: function(val,oldval){
        // console.log(val,oldval)
        this.total = this.price*val;
      }
    },
    // computed: {
    //   mctotal: function(){
    //     this.total = this.price*this.count;
    //   }
    // }

    // mounted(){
    //   this.$nextTick(function(){
    //     this.getTotal();
    //   })
    // }


  }
</script>

<style type="text/css" scoped>

  .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  .clearfix{*+height:1%;}
  .price,.count, .total, .addressL{
    text-align: center;
  }
  .addressL,.slot{
    margin-top: 30px;
  }
  .head{
    max-width: 400px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .head ul{
    width: 650px;
  }
  .head li{
    list-style: none;
    float: left;
    padding-left: 10px;
  }
  .place{
    height: 40px;
    line-height: 40px;
  }
</style>